.invite-warp {
    background: #d55949;
    overflow: hidden;

    .banner {
        width: 100%;
        height: 278px;
        background: url("../../assets/img/invite/banner.png") no-repeat center;
        background-size: 100%;
        margin-bottom: -25px;
        z-index: -1;
    }

    .phone {
        height: 194px;
        background: url("../../assets/img/invite/phone.png") no-repeat center;
        background-size: 100%;
        width: 355px;
        margin: 0px auto 0;
        z-index: 99;
        overflow: hidden;
        .phone-form {
            width: 335px;
            height: 162px;
            border-radius: 5px;
            margin: 25px auto 0;
            overflow: auto;
            p {
                font-size: 13px;
                color: #4e5259;
                margin: 25px 0 20px 30px;
            }
            input {
                display: block;
                margin: 0 auto;
                width: 265px;
                height: 35px;
                border-radius: 3px;
                border: solid 0.5px #bec4cc;
                padding-left: 10px;
            }
            .phone-btn {
                margin: 20px auto 0;
                width: 275px;
                height: 35px;
                line-height: 35px;
                background-color: #c84a3c;
                border-radius: 3px;
                text-align: center;
                color: #fff;
                font-size: 15px;
            }
        }
    }
    .result{
        height: 316px;
        background: url("../../assets/img/invite/code.png") no-repeat center;
        background-size: 100%;
        width: 355px;
        margin: 0px auto 0;
        z-index: 99;
        overflow: hidden;
       .result-content{
           width: 335px;
           height: 293px;
           border-radius: 5px;
           margin: 25px auto 0;
           overflow: auto;
           p {
               font-size: 13px;
               color: #4e5259;
               margin: 25px 0 20px 30px;
           }
           .down-btn{
               margin: 0 auto;
               width: 275px;
               height: 35px;
               line-height: 35px;
               background-color: #c84a3c;
               border-radius: 3px;
               font-size: 15px;
               text-align: center;
               color: #fff;
           }
           .result-flex-warp{
               width: 90%;
               margin: 0 auto;
               img{
                   display: block;
                   margin: 0 auto;
                   margin-bottom: 21px;
               }
           }
       }
    }
    .code {
        height: 316px;
        background: url("../../assets/img/invite/code.png") no-repeat center;
        background-size: 100%;
        width: 355px;
        margin: 0px auto 0;
        z-index: 99;
        overflow: hidden;
        .phone-form {
            width: 335px;
            height: 293px;
            border-radius: 5px;
            margin: 25px auto 0;
            overflow: auto;
            p {
                font-size: 13px;
                color: #4e5259;
                margin: 25px 0 20px 30px;
            }
            .read {
                font-size: 12px;
                color: #bfc4cb;
                margin-top: 10px;
                span {
                    text-align: center;
                    font-size: 12px;
                    color: #337bf6;
                }
            }
            input {
                display: block;
                margin: 0 auto;
                width: 265px;
                height: 35px;
                border-radius: 3px;
                border: solid 0.5px #bec4cc;
                padding-left: 10px;
                margin-bottom: 15px;
            }
            .phone-btn {
                margin: 20px auto 0;
                width: 275px;
                height: 35px;
                line-height: 35px;
                background-color: #c84a3c;
                border-radius: 3px;
                text-align: center;
                color: #fff;
                font-size: 15px;
            }

            .code-warp {
                margin: 0 auto;
                width: 280px;
                height: 35px;
                input {
                    float: left;
                    width: 175px;
                    height: 35px;
                    border-radius: 3px;
                    border: solid 0.5px #bec4cc;
                }
                .send-code {
                    float: left;
                    width: 80px;
                    height: 35px;
                    line-height: 35px;
                    border-radius: 3px;
                    text-align: center;
                    font-size: 13px;
                    background: #bec4cc;
                    margin-left: 10px;
                    color: #ffffff;
                }
                .active-code{
                    float: left;
                    width: 80px;
                    height: 35px;
                    line-height: 35px;
                    border-radius: 3px;
                    text-align: center;
                    font-size: 13px;
                    background: #d55949;
                    margin-left: 10px;
                    color: #ffffff;
                }

            }
        }

    }
    .interest {
        width: 355px;
        height: 130px;
        background: url("../../assets/img/invite/interest.png") no-repeat center;
        background-size: 100%;
        margin: 30px auto 0;
        overflow: hidden;
        .flex-warp {
            width: 335px;
            height: 100px;
            margin: 30px auto 0;
            text-align: center;
            div {
                font-size: 23px;
                color: #f0454b;
                margin-top: 5px;
            }
            span {
                font-size: 13px;
                color: #f0454b;
            }
            p {
                font-size: 13px;
                color: #9ba5b2;
                margin-top: 5px;
            }
        }
    }

    .more {
        width: 355px;
        height: 335px;
        background: url("../../assets/img/invite/more.png") no-repeat center;
        background-size: 100%;
        margin: 30px auto 0;
    }

    .invite-tip {
        width: 100%;
        text-align: center;
        font-size: 12px;
        color: #ffffff;
        margin-top: 25px;
        margin-bottom: 13px;
    }
}
